<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理员-图书管理系统</title>
    <link href="{__STATIC_PATH}layui/css/layui.css" rel="stylesheet"/>

</head>
<div class="layui-layout layui-layout-admin">

    <div class="layui-header">
        <div class=" layui-nav " style="font-size: x-large; color: #009688;line-height: 60px;"> 图 书 管 理 系 统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="{__STATIC_PATH}images/user_image.jpg" class="layui-nav-img">
                    <span th:text="${session.admin.getAdminName()}"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/adminLogOut">退出登录</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree">

                <li class="layui-nav-item ">
                    <a class="" href="javascript:;">书籍管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/admin/add">&emsp;&emsp;录入新书</a></dd>
                        <dd><a href="/admin/index/addCategory">&emsp;&emsp;新建类别</a></dd>
                        <dd><a href="/admin/Books">&emsp;&emsp;查询书籍</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">用户管理</a>
                    <dl class="layui-nav-child">
                        <dd class="layui-this"><a href="/admin/user">&emsp;&emsp;查询用户</a></dd>
                        <dd><a href="/admin/user/user">&emsp;&emsp;新增用户</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item ">
                    <a class="" href="javascript:;">借阅信息</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/admin/user/borrow">&emsp;&emsp;所有记录</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item"><a href="/admin/admin">个人信息</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body layui-container">

        <hr class="layui-bg-blue">
        <h2 style="text-align:center">查询用户</h2>
        <hr class="layui-bg-blue">

        <table class="layui-table" lay-size="sm">
            <thead>
            <tr>
                <th>id</th>
                <th>用户名</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {volist name="list['data']" id="vo"}
            <tr>
                <td>
                    {$vo.user_id}
                </td>
                <td>
                    {$vo.user_name}
                </td>
                <td>
                    {$vo.user_email}
                </td>
                <td>
                    <button class="layui-btn layui-btn-sm layui-btn-danger del_btn" lay-event="delete" data-id="{$vo.user_id}">删除
                    </button>
                </td>
            </tr>
            {/volist}
            </tbody>

        </table>
        <div id="pages"></div>

    </div>
    <div th:include="common/footer :: footer"></div>

</div>

<script src="{__STATIC_PATH}scripts/jquery.min.js"></script>
<script src="{__STATIC_PATH}layui/layui.js"></script>
<script src="{__STATIC_PATH}layui/layui.all.js"></script>
<!--<script src="{__STATIC_PATH}scripts/admin/showUsers.js"></script>-->
<script>
    layui.use(['form', 'element','layer'], function () {
        let form = layui.form;
        let element = layui.element;
        let layer = layui.layer;
        var laypage = layui.laypage;
        laypage.render({ //分页
            elem: 'pages'
            , count: {$list.total}
            , theme: '#FFB800'
            , limit: {$list.per_page}
            , curr : {$list.current_page}
            , jump:function (obj,first) {
                if (!first) {
                    location.href = "?page="+obj.curr
                }
            }
        });
    });



        //点击删除按钮后删除一行
        $(".delete").onclick(function () {

            let that = $(this);

            layer.confirm('确认删除?', {
                btn: ['确认', '取消'] //按钮
            }, function () {
                let userId = that.val();

                deleteUserById(userId);

                that.parent().parent().remove();
                layer.msg("删除成功", {icon: 1, time: 1000});

                setTimeout(function () {

                    // 关闭所有 layer选项框
                    parent.layer.closeAll();
                }, 1000)

            });

        });

    });

    //ajax删除用户
    function deleteUserById(userId) {
        $.ajax({
            async: false,
            type: "post",
            url: "/deleteUser",
            dataType: "json",
            data: {userId: userId},
            success: function (data) {

            },
            error: function (data) {
                alert(data.result);
            }
        });
    }
</script>
</body>
</html>
